<template>
	<view class="container">
		<view class="title_box">
			<text class="title_text">我 去 图 书 馆</text>
			<view class="avator_box">
				<u-image class="avator" width="200rpx" height="200rpx" :src="avatorSrc"></u-image>
			</view>
			<text class="name">薛丹</text>
		</view>
		<view class="content">
			<view class="school_name">
				<text>武汉纺织大学</text>
			</view>
			<view class="select_box">
				<view>
					<u-input v-model="city" placeholder="所有城市" @click="selectCity" type="select"
						placeholder-style="padding-left: 10rpx;" style="background-color: #FFFFFF;">
					</u-input>
					<u-select v-model="cityShow" mode="single-column" placeholder="选择场馆" :list="cityList"
						@confirm="confirm" style="background-color: #FFFFFF;">
						<text>name</text>
					</u-select>
				</view>
				<view>
					<u-input v-model="school" placeholder="武汉纺织大学" @click="selectSchool" type="select"
						placeholder-style="padding-left: 10rpx;" style="background-color: #FFFFFF;">
					</u-input>
					<u-select v-model="schoolShow" mode="single-column" placeholder="选择场馆" :list="schoolList"
						@confirm="confirm" style="background-color: #FFFFFF;">
						<text>name</text>
					</u-select>
				</view>
			</view>
			
			<u-button style="background-color: #5e85bd;margin-top: 50rpx;border: 1px solid #5e85bd;" type="">确认修改</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatorSrc: '../../../static/001.jpg',
				appHeight: 0,
				appWidtht: 0,
				city: '',
				school: '',
				cityShow: false,
				schoolShow: false,
				cityList: [{
						value: '1',
						label: '1'
					},
					{
						value: '2',
						label: '2'
					}
				],
				schoolList: [{
					value: '1',
					label: "阳关图书馆-F"
				}, {
					value: '3',
					label: "阳关图书馆-M"
				}, {
					value: '2',
					label: '阳关图书馆-A'
				}]
			}
		},

		// 监听页面初次渲染完成
		onReady: () => {

		},
		// 方法
		methods: {
			selectCity() {
				this.cityShow = true;
			},
			selectSchool() {
				this.schoolShow = true
			}
		}
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	// 背景自适应
	uni-page-body {
		height: 100%;
	}

	.container {
		height: 100%;
		width: 100%;
		background-color: #e2e6ee;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title_box {
			width: 100%;
			height: 30%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			background-color: #5c84bf;

			.title_text {
				color: #FFFFFF;
				font-size: 50rpx;
				font-weight: 900;
			}

			.avator_box {
				border-radius: 100rpx;
				height: 200rpx;
				width: 200rpx;
				overflow: hidden;
			}

			.name {
				color: #FFFFFF;
				font-size: 40rpx;
			}
		}

		.content {
			.school_name {
				height: 150rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 35rpx;
				font-weight: 900;
			}
			.select_box {
				width: 100%;
				display: flex;
				
				.u-input {
					margin: 0 10rpx;
					border-radius: 5rpx;
				}
			}
			
		}

	}
</style>
